<template>
  <div class="nav bg-white f j-c van-hairline--top" style="height:65px;min-height:65px;">
    <router-link
      :to="item.link"
      class="f j-c center w100"
      v-for="(item,index) in navData"
      :key="index"
    >
      <mu-ripple color="#000" class="mu-ripple-demo w100 h100 center f j-c" style="position: relative;">
        <div class="h100" style="width:28px;">
          <img style="margin-top:10px" :src="item.img">
          <p :class="item.color?'text-blue-400 f10 mt5':'t2 f10 mt5'">{{item.name}}</p>
        </div>
      </mu-ripple>
    </router-link>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navData: [
        {
          name: "首页",
          ico: "./static/img/nav1.png",
          icoActive: "./static/img/nav1_active.png",
          img: "",
          link: "/",
          color: false
        },
        {
          name: "店铺",
          ico: "./static/img/nav2.png",
          icoActive: "./static/img/nav2_active.png",
          img: "",
          link: "/page/shop",
          color: false
        },
        {
          name: "我的",
          ico: "./static/img/nav3.png",
          icoActive: "./static/img/nav3_active.png",
          img: "",
          link: "/page/mine",
          color: false
        }
      ]
    };
  },
  created() {
    this.setMenu();
  },
  watch: {
    $route() {
      this.setMenu();
    }
  },
  methods: {
    setMenu() {
      for (let index = 0; index < 3; index++) {
        this.navData[index].img = this.navData[index].ico;
        this.navData[index].color = false;
      }
      if (this.$route.name == "Home") {
        this.navData[0].img = this.navData[0].icoActive;
        this.navData[0].color = true;
      }
      if (this.$route.name == "Shop") {
        this.navData[1].img = this.navData[1].icoActive;
        this.navData[1].color = true;
      }
      if (this.$route.name == "Mine") {
        this.navData[2].img = this.navData[2].icoActive;
        this.navData[2].color = true;
      }
    }
  }
};
</script>
<style scoped>
</style>
